<template>
  <section>
    <el-row style="margin-bottom: 20px;">
      <el-col>
        <el-table
          style="border: 1px solid #ededed;"
          :data="pageData.records"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          ref="multipleSelection"
          :height="height"
          table
          stripe
          :row-key="rowKey"
          v-loading="loading"
          @selection-change="handleSelectionChange"
          @header-contextmenu="headerContextmenu"
          @row-contextmenu="rowContextmenu"
        >
          <div slot="empty">
            <el-empty :description="emptyText" />
          </div>
          <slot />
        </el-table>
        <div class="paginationCss" v-if="showPage">
          <el-pagination
            style="float:right;display:block"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageData.current"
            :page-sizes="[10, 20, 30]"
            :page-size="search.pageSize"
            layout="total,sizes,prev, pager, next,jumper"
            :total="pageData.total"
            :loading="loading"
            :page-count="pageData.pages"
          />
        </div>
      </el-col>
    </el-row>
  </section>
</template>

<script>
export default {
  name: "page-table",
  props: {
    height: [Number,String],
    loading: {
      type: Boolean,
      default: false
    },
    autoData: {
      type: Boolean,
      default: false
    },
    showPage: {
      type: Boolean,
      default: true
    },
    rowStyle: {
      type: Object,
      default: () => {
        return {};
      }
    }, //行样式
    cellStyle: {
      type: Object,
      default: () => {
        return {};
      }
    }, //单元格样式
    pageData: {
      type: Object,
      default: function() {
        return {};
      }
    },
    // 全选select 变化监听方法
    selectChange: {
      type: Function,
      default: () => {
      }
    },
    // 数据查询
    doGetPageData: {
      type: Function,
      default: () => {
      }
    },
    // 表格头部右件菜单事件
    headerContextmenu: {
      type: Function,
      default: () => {
      }
    },
    // 表格row右键菜单事件
    rowContextmenu: {
      type: Function,
      default: () => {
      }
    },
    rowKey: {
      type: String,
      default: "id"
    },
    emptyText: {
      type: String,
      default: "暂无数据"
    }
  },
  beforeUpdate() {
    //动态表头或动态列时 防止出现闪屏现象
    this.$nextTick(() => {
      this.$refs.multipleSelection.doLayout();
    });
  },
  data() {
    return {
      search: {
        pageSize: 10,
        pageIndex: 1
      }
    };
  },
  mounted() {
    if (this.autoData) {
      this.initTable();
    }
  },
  methods: {
    // 初始化表格
    initTable() {
      this.doGetPageData(this.search);
    },
    // 分页数改变
    handleSizeChange(val) {
      this.search.pageSize = val;
      this.search.pageIndex = 1;
      this.doGetPageData(this.search);
    },
    // 翻页
    handleCurrentChange(val) {
      this.search.pageIndex = val;
      this.doGetPageData(this.search);
    },
    // 全选
    handleSelectionChange(val) {
      this.selectChange(val);
      this.$emit("select-change", val);
    },
    //清空左侧选中
    clearOption() {
      this.$refs.multipleSelection.clearSelection();
    }
  }
};
</script>

<style scoped lang="less">
  .empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 250px;

    img {
      opacity: 0.5;
      pointer-events: none;
      user-select: none;
    }

    span {
      line-height: 2;
      user-select: none;
    }
  }

  .table-content {
    margin-bottom: 20px;
  }

  .paginationCss {
    margin-top: 10px;

    .el-pager {
      li {
        margin-left: 4px;
        line-height: 35px;
      }
    }

    .btn-next {
      margin-left: 4px !important;
      line-height: 35px;
    }

    .number,
    .el-icon-d-arrow-right,
    .el-icon-d-arrow-left,
    .el-icon-more,
    .btn-prev,
    .btn-next {
      border: 1px solid #e6e6e6 !important;
      width: 35px !important;
      height: 35px !important;
      color: #999999;
      border-radius: 3px;
    }

    .active {
      border: none;
      background: #3399ff !important;
      color: #fff !important;
    }

    .el-pagination {
      .el-input__inner {
        height: 35px !important;
      }
    }
  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    height: 9px;
  }
</style>
